<template>
  <div class="quote-detail-wrap">
    <div v-if="isVisible" class="quote-detail">
      <!-- <div class="title">{{ businessDetail.title }}</div> -->
      <table cellpadding="0" cellspacing="0">
          <tr>
            <th colspan="11" class="title dark-th">{{ businessDetail.title }}</th>
          </tr>
          <tr>
            <td colspan="11">
              <div class="flex-between">
                <div>报价单编号：{{ businessDetail.sn }}</div>
                <div>报价日期：{{ businessDetail.quotationDate }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="6">报价方：{{ businessDetail.ownerCompanyName || '' }}</td>
            <td colspan="5">询价方：{{ businessDetail.customerName || '' }}</td>
          </tr>
          <tr>
            <td colspan="6">联系人：{{ businessDetail.ownerUser || '' }}</td>
            <td colspan="5">联系人：{{ businessDetail.contactsName || '' }}</td>
          </tr>
          <tr>
            <td colspan="6">联系方式：{{ businessDetail.ownerPhoneNumber || '' }}</td>
            <td colspan="5">联系方式：{{ businessDetail.phoneNumber || '' }}</td>
          </tr>
          <tr>
            <td colspan="11">以下为贵公司询价产品明细，请详阅：如有疑问，请及时与我司联系，谢谢！</td>
          </tr>
          <tr>
            <th width="50" align="center" class="dark-th">序号</th>
            <th width="100" align="center" class="dark-th">机型</th>
            <th width="100" align="center" class="dark-th">图片</th>
            <th width="200" align="center" class="dark-th">配置参数</th>
            <th width="100" align="center" class="dark-th">成色</th>
            <th width="100" align="center" class="dark-th">月租（元/月）</th>
            <th width="100" align="center" class="dark-th">黑白免印数量</th>
            <th width="150" align="center" class="dark-th">黑白超张单价</th>
            <th width="100" align="center" class="dark-th">彩色免印数量</th>
            <th width="150" align="center" class="dark-th">彩色超张单价</th>
            <th width="100" align="center" class="dark-th">备注</th>
          </tr>
          <!-- 检查占据五行 -->
          <!-- 此处双向绑定需要使用:rowspan 而不是rowspan -->
          <tr v-for="(item, index) in businessDetail.businessProductList" :key="index">
            <td align="center">{{ index + 1 }}</td>
            <td align="center">{{ item.productName || '' }}</td>
            <td align="center">
              <image
                :src="item.coverImage"
                mode="heightFix"
                style="width: 100%; height: 100rpx; vertical-align: text-top"
              ></image>
            </td>
            <td align="center">
              <!-- ※ -->
              {{ item.fitMachine || '' }}
            </td>
            <td align="center">{{ item.isNewProductMsg || '' }}</td>
            <td align="center">{{ filterValue(item.price) }}</td>
            <!-- <td align="center">{{ item.productName }}</td>
              <td align="center">{{ item.productName }}</td> -->
            <td align="center">{{ filterValue(item.blackFreeQuantity) }}</td>
            <td align="center">
              {{ filterValue(item.blackAdvancePrice) }}
            </td>
            <td align="center">{{ filterValue(item.colorFreeQuantity) }}</td>
            <td align="center">
              {{ filterValue(item.colorAdvancePrice) }}
            </td>
            <td align="center">{{ item.remark || '' }}</td>
          </tr>
          <tr>
            <td colspan="11">备注：</td>
          </tr>
          <tr>
            <td align="center">（1）</td>
            <td colspan="10">以上报价包含：产品单价，型号等。</td>
          </tr>
          <tr>
            <td  align="center">（2）</td>
            <td colspan="10">报价有效期：自报价之日起30个工作日。</td>
          </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import {getBusinessDetail, getBusinessQuoteDetail} from '@/api/businessOpportunity'
import { getAssetsImages, formatDate } from '@/utils'
import { reactive, toRefs, onBeforeMount, nextTick } from 'vue'
import { Toast } from 'vant'
export default {
  setup() {
    const router = useRouter()
    const getAssetsImages1 = getAssetsImages
    const formatDate1 = formatDate
    const state = reactive({
      id: '',
      isVisible: false, //是否初始化完毕
      businessDetail: {}
    })
    const filterValue = (val) => {
      if (val == undefined || val == null) {
        return ''
      } else {
        return val
      }
    }
    const getBusinessDetails = () => {
	    getBusinessQuoteDetail({ id: state.id })
        .then((res) => {
          state.businessDetail = res
          state.businessDetail.quotationDate = formatDate1('y年m月d日', res?.quotationDate)
          state.isVisible = true
        })
        .catch((res) => {
          console.log(JSON.stringify(res))
        })
    }
    onBeforeMount(() => {
      const { query } = router.currentRoute.value
      state.id = query.id
      // 查询商品详细信息
      getBusinessDetails()
      // document.pageScrollTo({ scrollTop: 0, duration: 300 })
    })
    return {
      ...toRefs(state),
      getAssetsImages1,
	    filterValue
    }
  }
}
</script>

<style lang="less" scoped>
.quote-detail-wrap {
  height: 100vh;
  width: 100vw;
  overflow: auto;
}

.quote-detail {
  height: 100vw;
  width: 100vh;
  transform-origin: 0% 0%;
  transform: rotate(90deg) translateY(-100%);
  overflow: auto;
}

.title {
  font-size: 30px;
  color: #fff;
  background-color: #0f243e;
  text-align: center;
  height: 60px;
  line-height: 60px;
  font-weight: 600;
}

.table--border {
  border-color: #333 !important;
}

table {
  // width: 100%;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
  border-radius: 0 !important;
  .dark-th {
    background-color: #0f243e;
    color: #fff;
  }
  th,
  td {
    padding: 6px 10px;
    font-size: 12px;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
  }
}
</style>
